<template>
  <div class="container">
    <searchBox :total="total" @onSubmit='onSubmit' @clearAway='clearAway'></searchBox>
    <el-button-group>
      <el-button
        :class="{ switchover: type === 'all' }"
        @click="switchover('all')"
        >全部</el-button
      >
      <el-button
        :class="{ switchover: type === 'await' }"
        @click="switchover('await')"
        >待审核</el-button
      >
      <el-button
        :class="{ switchover: type === 'audit' }"
        @click="switchover('audit')"
        >已审核</el-button
      >
      <el-button
        :class="{ switchover: type === 'refuse' }"
        @click="switchover('refuse')"
        >已拒绝</el-button
      >
    </el-button-group>
    <el-alert class="elAlert" :title="`数据共${total}条`" type="info" show-icon>
    </el-alert>
    <el-table ref="table" :data="list" style="width: 100%">
      <el-table-column prop="number" label="试题编号" width="190">
      </el-table-column>
      <el-table-column prop="subjectID" label="学科" width="190">
      </el-table-column>
      <el-table-column prop="catalogID" label="目录" width="190">
      </el-table-column>
      <el-table-column prop="questionType" label="题型" width="90">
        <template slot-scope="{ row }">
          <span style="margin-right: 10px">{{
            row.questionType === '1'
              ? '单选'
              : row.questionType === '2'
              ? '多选'
              : row.questionType === '3'
              ? '简答'
              : ''
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="question" label="题干" width="210">
        <template slot-scope="{ row }">
          <div v-html="row.question"></div>
        </template>
      </el-table-column>
      <el-table-column prop="chkDate" label="录入时间" width="180">
      </el-table-column>
      <el-table-column prop="difficulty" label="难度" width="180">
        <template slot-scope="{ row }">
          <span style="margin-right: 10px">{{
            row.difficulty === '1'
              ? '简单'
              : row.difficulty === '2'
              ? '一般'
              : row.difficulty === '3'
              ? '困难'
              : ''
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="creatorID" label="录入人" width="180">
        <template slot-scope="{ row }">
          <span style="margin-right: 10px">{{
            row.creatorID === 2
              ? '超级管理员'
              : row.creatorID === 4
              ? 'demo'
              : ''
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="chkState" label="审核状态" width="180">
        <template slot-scope="{ row }">
          <div style="margin-right: 10px">
            {{
              row.chkState === 1
                ? '已审核'
                : row.chkState === 2
                ? '已拒绝'
                : row.chkState === 0
                ? '待审核'
                : ''
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="chkRemarks" label="审核意见" width="180">
      </el-table-column>
      <el-table-column prop="chkUser" label="审核人" width="180">
      </el-table-column>
      <el-table-column prop="publishState" label="发布状态" width="180">
        <template slot-scope="{ row }">
          <span style="margin-right: 10px">{{
            row.publishState === 1 ? '已发布' : row.publishState === 0 ? '已下架' : ''
          }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="220" fixed="right" align="center">
        <template #default="{ row }">
          <el-button type="text" @click="openDrawer(row.id,'preview')">预览</el-button>
          <el-button type="text" @click="openDrawer(row.id,'audit')" :disabled="row.chkState!==0">审核</el-button>
          <el-button type="text" @click="openDrawer(row.id,'edit')" :disabled="row.publishState===1">修改</el-button>
          <el-button v-if="row.publishState===0" type="text" @click="row.publishState=1">上架</el-button>
          <el-button v-else type="text" @click="row.publishState=0">下架</el-button>
          <el-button type="text" @click="openDrawer(row.id,'del')" :disabled="row.chkState!==0">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.page"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="query.pagesize"
      layout=" prev, pager, next,sizes, jumper"
      :total="total"
    >
    </el-pagination>
    <QuestionsCheck :form='form' ref="check" @newDataes='newDataes'></QuestionsCheck>
  </div>
</template>

<script>
import moment from 'moment'
import searchBox from '@/module-hmmm/components/search-box'
import QuestionsCheck from '@/module-hmmm/components/questions-check'
import { choice, choiceAdd } from '@/api/hmmm/questions.js'
export default {
  components: {
    searchBox,
    QuestionsCheck
  },
  data () {
    return {
      type: 'all',
      total: 0,
      query: {
        page: 1,
        pagesize: 10
      },
      list: [],
      form: {
        chkRemarks: '',
        chkState: null,
        id: null
      }
    }
  },
  created () {
    this.initData()
  },
  methods: {
    async initData () {
      if (this.type === 'await') {
        this.query.chkState = 0
      } else if (this.type === 'audit') {
        this.query.chkState = 1
      } else if (this.type === 'refuse') {
        this.query.chkState = 2
      } else {
        this.query.chkState = null
      }
      const { data } = await choice(this.query)
      this.total = data.counts
      this.list = data.items
      this.list.forEach(item => {
        item.chkDate = moment(item.chkDate).format('YYYY-MM-DD HH:mm:ss')
      })
    },
    async onSubmit (data) {
      const res = await choice({ ...data, ...this.query })
      this.total = res.data.counts
      this.list = res.data.items
      this.list.forEach(item => {
        item.chkDate = moment(item.chkDate).format('YYYY-MM-DD HH:mm:ss')
      })
    },
    clearAway () {
      this.initData()
    },
    switchover (type) {
      this.type = type
      this.query.page = 1
      this.initData()
    },
    async openDrawer (id, type) {
      if (type === 'preview') {
      } else if (type === 'edit') {
        this.$router.push({
          path: 'new',
          query: {
            id
          }
        })
      } else if (type === 'audit') {
        this.form.id = id
        this.$refs.check.dialogVisible = true
      } else if (type === 'del') {
        this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await choiceAdd({ id, choiceState: 0 })
          if (this.list.length < 1) {
            this.query.page--
          }
          this.initData()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    newDataes () {
      this.initData()
    },
    // 分页点击
    handleSizeChange (val) {
      this.query.pagesize = val
      this.query.page = 1
      this.initData()
    },
    handleCurrentChange (val) {
      this.query.page = val
      this.initData()
    }
  },
  computed: {
  }
}
</script>

<style scoped lang="less">
.container {
  padding: 20px;
  background-color: #fff;
}
.elAlert {
  margin: 10px 0;
}

.switchover {
  color: #409eff;
  border-bottom: none;
}
</style>
